<template>
  <div>
    <div class="container">
      <div class="nav">
        <div class="logo-container" @click="goHome">
          <div class="logo">
            <!--临时logo created by 买大米种水稻 2022/04/16-->
            <img src="~@/assets/WDM.jpg" STYLE="width: 120%"/>
          </div>
          <div class="title"><h1>智慧学伴</h1></div>
        </div>
      </div>
      <div class="theme">
        <h1 class="text-title1">LEARNING
        </h1>
        <h1 class="text-title2">PARTNER
        </h1>
        <p class="text-description">
          通过
          <span class="emphasize">降低资源颗粒度</span>
          采用资源切片技术
        </p>
        <p class="text-description">
          帮助提高备课效率和课堂教学效果
        </p>
      </div>
    </div>
    <!-- 搜索区域 -->
    <div class="serach">
      <el-input v-model="searchInput" placeholder="搜索知识点" class="searchClass" @change="Search" @keyup.enter="Search">
        <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
      </el-input>
    </div>
    <div class="contentContainer">
      <div id="experience" class="tag" style="padding: 10px;">
        <div>
          <img src="@/assets/segmentImg/资料库.png" class="tagImg" >
          <span
            style="
              font-family: 'Roboto', sans-serif;
              font-size: 15px;
              vertical-align: middle;
              color: rgb(34, 52, 100);
            "
          >
            CONCLUDE
          </span>
        </div>
        <p class="Chinese">
          <router-link
            :to="{
              name:'TeachingPlane',
              hash:'#experience',
          }" >
            教案切片
          </router-link>
        </p>
        <p class="English">SILCES OF TEACHING PLAN</p>
        <div class="line"></div>
        <p class="Chinese">
          <router-link :to="{
            name:'Examination',
            hash:'#experience'
          }

          ">
            试题切片
          </router-link>
        </p>
        <p class="English">SILCES OF EXAMINATION</p>
        <div class="line"></div>
      </div>
      <!-- 右边区域 -->
      <div>
        <router-view ref="son"></router-view>
      </div>

    </div>

  </div>
</template>

<script>
// import NavMenu from '@/components/NavMenu'
import NavMenu from '@/components/NavMenu/Logo.vue'
export default {
  name: 'Instruction',
  components: { NavMenu },
  data: function() {
    return {
      searchInput: ''
    }
  },
  watch: {

  },

  methods: {
    goHome() {
      this.$router.push({
        path: '/'
      })
    },
    Search() {
      // 根据显示的页面不同，调用不同子组件的值
      this.$refs.son.getsearchInput(this.searchInput)
    }

  }

}
</script>

<style scoped>
.experience{
  padding: 40px 0;
}

.container{
  min-height: 500px;
  min-width: 1519px;
  padding-top: 22px;
  padding-bottom: 22px;
  background-image: linear-gradient(to bottom,rgba(255,255,255,0)50%,rgba(255,255,255,1)),url('~@/assets/segmentImg/backImg.png') ;
  background-repeat:no-repeat;
  background-position:right;
  background-origin:padding-box;

}
.logo-container {
  display: flex;
  cursor: pointer;
}

.logo {
  width: 50px;
  height: 50px;
  margin-left: 50px;
  /*background-color: #aaa;*/
}

.title {
  height: 50px;
  line-height: 50px;
  font-size: 0.8rem;
  margin-left: 0.5rem;
  margin-right: 1rem;
}
.theme{
  width: 22%;
  height: 220px;
  margin-top: 100px;
  margin-left: 200px;
}
.theme .text-title1{
  font-size: 40px;
  color: #223464;
  font-family: 'Roboto', sans-serif;
  font-weight: lighter;
  margin-bottom: -15px;
  padding-left: 3px;
}
.theme .text-title2{
  margin-bottom: 10px;
  font-size: 70px;
  color: #223464;
  font-family: 'Roboto', sans-serif;
}
.theme .text-description{
  width: 100%;
  font-size: 18px;
  font-weight: lighter;
  color: #223464;
  /* text-align: right; */
  padding-left: 5px;
}
.emphasize{
  font-size: 19px;
  font-weight: bold;
  color: #313e61;
  margin-left: -2px;
  margin-right: -2px;
}

/* 搜索框 */
.serach{
  width: 35%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 50px;
}

.searchClass /deep/{
  /* border: 1px solid rgb(225, 161, 237); */
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0px 2px 5px rgb(233, 226, 252);
}
.searchClass:hover /deep/{
  /* border: 1px solid #D5E3E8; */
  background: #fff;
  box-shadow: inset 0px 1px 5px rgb(233, 226, 252);
}
.searchClass /deep/ .el-input-group__prepend {
  border: none;
  background-color: transparent;
  padding: 0 10px 0 30px;
}
.searchClass /deep/ .el-input-group__append {
  border: none;
  background-color: transparent;
}
.searchClass /deep/ .el-input__inner {
  height: 50px;
  line-height: 50px;
  border: none;
  background-color: transparent;

}
.searchClass /deep/ .el-icon-search{
  font-size: 16px;
}

.searchClass:hover /deep/ .el-icon-search{
  color: rgb(84, 211, 188);
  font-size: 16px;
}

.contentContainer{
  display: grid;
  grid-template-columns:6% 20% 74%;
  justify-items:left;
}

/* 内容tag区域 */
.tag{
  width:260px;
  height: 230px;
  background-color: rgb(254, 254, 254);
  grid-column: 2;
  box-shadow: 4px 4px 10px rgb(233, 226, 252);
}

.tagImg{
  margin-left: 11px;
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

.tag .Chinese{
  margin-top: 10px;
  margin-left: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: rgb(34, 52, 110);
}
.tag .English{
  font-family: 'Roboto', sans-serif;
  margin-left: 20px;
  margin-bottom: 5px;
  font-size: 6px;
  color: rgb(34, 52, 110);
}
.tag .line{
  height: 1px;
  margin-left: 20px;
  background: linear-gradient(to right,rgb(240, 156, 79),#eee,#fff);
}

.router-link-active {
  text-decoration: none;

}
a {
  text-decoration: none;

}

</style>
